<template>
  <view class="detail">
    <u-swiper
      :list="goodsInfo.pics"
      border-radius="0"
      bg-color="#fff"
      name="pics_big"
      width="497"
      height="497"
      img-mode="aspectFit"
      @click="handlerPreviewImg"
    ></u-swiper>
    <!-- 价格 -->
    <view class="price">￥{{ goodsInfo.goods_price }}</view>
    <!-- 标题 -->
    <view class="title u-line-2">{{ goodsInfo.goods_name }}</view>
    <!-- 图文详情 -->
    <view class="detail">
      <view class="detail-title">图文详情</view>
      <view class="detail-content">
        <u-parse :html="goodsInfo.goods_introduce"></u-parse>
      </view>
    </view>
    <!-- 购物车 -->
    <view class="navigation">
      <view class="left">
        <view class="item">
          <u-icon
            name="server-fill"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">客服</view>
        </view>
        <navigator
          class="item car"
          url="/pages/cart/cart"
          open-type="switchTab"
        >
          <u-badge
            class="car-num"
            :count="count"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon
            name="shopping-cart"
            :size="40"
            :color="$u.color['contentColor']"
          ></u-icon>
          <view class="text u-line-1">购物车</view>
        </navigator>
      </view>
      <view class="right">
        <view class="cart btn u-line-1" @click="addCart">加入购物车</view>
        <view class="buy btn u-line-1">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      list: [],
      goodsInfo: null,
    };
  },
  //   {goods_id:9832}  用解构的方式取出
  onLoad({ goods_id }) {
    // 没有的话给默认值
    goods_id = goods_id || 9832;
    this.getGoodsDetail(goods_id);
  },
  methods: {
    ...mapMutations("cart", ["addList"]),
    async getGoodsDetail(goods_id) {
      this.goodsInfo = await this.$u.get("/goods/detail", { goods_id });
    },
    // 照片放大预览,轮播图点击事件会返回index
    handlerPreviewImg(index) {
      console.log(index);
      const urls = this.goodsInfo.pics.map((item) => {
        return item.pics_big;
      });
      wx.previewImage({
        current: urls[index],
        urls, // 需要预览的图片http链接列表
      });
    },
    // 购物车数量添加
    addCart() {
      this.addList({ value: this.goodsInfo });
    },
  },
  // vuex数据
  computed: {
    ...mapGetters("cart", ["count"]),
  },
};
</script>

<style lang="scss" scoped>
.detail {
  margin-bottom: 100rpx;
}
.price {
  color: $theme-color;
  padding: 10rpx;
  font-size: 36rpx;
}
.title {
  padding: 10rpx;
}
.detail-title {
  text-align: center;
  margin-top: 10rpx;
  line-height: 40rpx;
}
.navigation {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  .left {
    display: flex;
    justify-content: space-around;
    flex: 1;
    font-size: 20rpx;
    .item {
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }
    .cart {
      background-color: #ed3f14;
      margin-right: 30rpx;
    }
    .buy {
      background-color: #ff7900;
    }
  }
}
</style>